.fontColor {
    color: red;
}


/* div {
    color: yellow;
} */

#box {
    color: blue;
}


/* 子元素选择器 */


/* #box>ul>li {
    color: green;
} */


/* 后代选择器 */

#box .text {
    color: pink;
}


/* ----------------盒模型样式-------------------------------- */

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 300px;
    height: 300px;
    /* background-color: pink;
    border-top-color: red;
    border-top-style: dotted;
    border-top-width: 10px;
    border-right-color: blue;
    border-right-width: 20px;
    border-right-style: double; */
    /* 简写形式 */
    /* border-top: 20px yellow solid;
    border-right: 20px blue double;
    border-bottom: 20px red dotted;
    border-left: 20px green solid; */
    /* 终极简写： 宽度 颜色 风格 */
    border: 10px red solid;
    /* padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px; */
    /* 简写形式：4个值（上 右 下 左） */
    /* padding: 10px 20px 30px 40px; */
    /* 简写形式：3个值（上 左右 下） */
    /* padding: 10px 20px 30px; */
    /* 简写形式：2个值（上下 左右） */
    /* padding: 10px 20px; */
    /* 简写形式：1个值（上下左右） */
    padding: 10px;
    /* 可以借助外边距设置元素居中（水平居中） */
    /* margin: 40px auto; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}